<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>推广中心</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }

        .box {
            width: 2.45rem;
            height: .4rem;
            background: rgba(18, 18, 18, 1);
            color: #fff;
            justify-content: space-around;
            align-items: center;
            font-size: .12rem;
            position: absolute;
            top: 1.5rem;
            left: .6rem;
            border-radius: 5px;
        }

        .box:after {
            content: '.';
            color: transparent;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 15px 10px 0 10px;
            border-color: rgba(18, 18, 18, 1) transparent transparent transparent;
            position: absolute;
            bottom: -0.15rem;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">推广中心</span>
        <span class="public-header-right">新建</span>
    </div>

    <!--正文-->
    <div class="Promotion-center bc-gray">
        <div class="hd flex">
            <a href="javascript:;" class="active">有效的</a>
            <a href="javascript:;">失效的</a>
        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <ul>
                    <li v-for='item in use'>
                        <div class="img"></div>

                        <span>{{item.couponName}}</span>
                        <p class="nn">
                            <span class="small">可优惠</span><em>￥</em><span class="big">{{item.couponMoney}}</span>
                        </p>
                        <p class="bt">
                            有效期:{{item.validData}}前
                        </p>
                    </li>
                  
                </ul>
     
            </div>
            <div class="bd-2 bd-0">
                <ul>
                    <li v-for='item in unuse' class="active">
                        <div class="img"></div>

                        <span>{{item.couponName}}</span>
                        <p class="nn">
                            <span class="small">可优惠</span><em>￥</em><span class="big">{{item.couponMoney}}</span>
                        </p>
                        <p class="bt">
                            有效期至:{{item.validData}}前
                        </p>
                    </li>
                </ul>
            </div>
        </div>



    </div>




    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })

        })
    </script>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
        new Vue({
            el: 'body',
            data: {
                use: [],
                unuse: []
            },
            ready: function () {
                this.$http.get(base_url + 'ZITAOHUI/coupon').then(
                    function (data) {
                        console.log(data)
                        var use = data.data.extend.data.expired;
                        var unuse = data.data.extend.data.unExpired;

                        for (let i = 0; i < use.length; i++) {
                            console.log(i)
                            let time = new Date(use[i].validData);
                            console.log(time)
                            use[i].validData = time.getMonth()+'.'+time.getDate()
                        }
                    

                        this.$set('use', use)
                        this.$set('unuse', unuse)
                    },
                    function () {

                    }
                )
            }
        })
    </script>
</body>

</html>